<template>
  <div class="flex">
    <div class="w-2/6" >
      <div class="flex items-center">
        <h3 class="flex-1">在线人员</h3>
        <!-- <h3 class="mr-10">叉车</h3> -->
        <el-button type="primary" class="mr-5">分配</el-button>
      </div>
      <div class="flex">
        <Line />
        <!-- <div class="bg-slate-100 w-3"></div>
        <Line /> -->
      </div>
    </div>
    <!-- <el-button type="primary">新建车辆</el-button> -->
    <div class="bg-slate-100 w-3"></div>
    <div class="w-4/6 pl-5">
      <div class="text-right">
        <el-button type="primary" @click="dialogVisible = true">新建车辆分配</el-button>
      </div>
      <el-table :data="tableData" class="my-5">
        <el-table-column type="selection" width="50" align="center" />
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column width="150px">
          <div class="flex w-full">
            <div class=" w-1/2">
              <img src="/bancar1.png" class="w-full" alt="">
            </div>
            +
            <div class="w-10">
              <img src="/touxiang1.svg" class="w-full" alt="">
            </div>
          </div>
        </el-table-column>
        <el-table-column v-for="(item, index) in s1" :key="index" :prop="'email' + index" :label="item" width="200" />
        <el-table-column label="操作" width="80">
          <el-button type="primary" text bg size="small" @click="dialogVisible = true">修改</el-button>
          <div>
            <el-button type="danger" text bg size="small">删除</el-button>
          </div>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog v-model="dialogVisible" title="编辑车辆" width="30%">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="90px" label-position="left">
        <el-form-item prop="username" label="专车名称">
          <el-input v-model="formData.username" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="叉车名称">
          <el-input v-model="formData.username" placeholder="请选择" />
        </el-form-item>
        <el-form-item prop="password" label="配送员">
          <el-input v-model="formData.password" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="跟车员">
          <el-input v-model="formData.username" placeholder="请选择" />
        </el-form-item>
        <el-form-item label="叉车人员">
          <el-input v-model="formData.username" placeholder="请选择" />
        </el-form-item>
        <!-- <el-form-item prop="username" label="板车人员">
          <el-input v-model="formData.username" placeholder="请选择" />
        </el-form-item>

        <el-form-item prop="username" label="线路">
          <el-input v-model="formData.username" placeholder="请选择" />
        </el-form-item> -->
        <template #footer>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleCreateOrUpdate" :loading="loading">确认</el-button>
        </template>
      </el-form>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import Line from '../shuttlebus/line.vue'
import { type CreateOrUpdateTableRequestData, type GetTableData } from "@/api/table/types/table"
import { reactive, ref } from "vue";

const tableData = [

]
for (let index = 0; index < 6; index++) {
  tableData.push(
    {
      email0: "6T-001 专车",
      email1: "张三 15295965521 配送员 李四 15295965521 跟车员 王五 18856560039 叉车员",
    },
    {
      email0: "15T-008 专车",
      email1: "李四 15295965521",
      email2: "王五 18856560039",
    },
  )
}
const s1 = ["车辆名称",
  // "配送员",
  // '跟车员'
  '车辆人员'
]
const dialogVisible = ref(false);
const formRef = ref<FormInstance | null>(null)
const formData = ref([])
const formRules: FormRules<CreateOrUpdateTableRequestData> = {
  username: [{ required: true, trigger: "blur", message: "请输入用户名" }],
  password: [{ required: true, trigger: "blur", message: "请输入密码" }]
}
</script>
<style lang="scss" scoped></style>
